<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
%>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/external/fullcalendar.css" />

<script type="text/javascript"
	src="<%=path%>/js/libs/forms/moment.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/js/libs/forms/fullcalendar.js"></script>


<style type="text/css">
.fc-header-center {
	width: 0px
}

.isHoliday {
	color: #red; background: #ffcc33 !important; border-color: #ffcc33 !important
}

.isWorkday {
	color: #FFF
}

.fc-header .fc-button {
	margin: 0.5em 0; vertical-align: top;
}

.fc-header-center {
	vertical-align: middle !important;
}

.fc-header-center .fc-header-title h2 {
	font-weight: bold;
}

.fc-header-left {
	padding-left: 10px !important;
}
</style>

<div class="box tabbedBox">
	<div class="header">
		<ul>
			<li class="current"><a href="#calendarConfig">日历设置</a></li>
			<li><a href="#calendarWorkdate"
				onclick="$('#calendarWorkdateSetting').fullCalendar('refetchEvents');">节假日设置</a>
			</li>
		</ul>
		<h2>&nbsp;</h2>
	</div>
	<div style="padding:0" class="content tabbed">

		<div id="calendarConfig">

			<form:form commandName="model" cssClass="validate"
				action="app/calendar/config/save">
				<form:hidden path="id" />

				<table class=" form-table">
					<tbody>
						<tr>
							<td class="td1">名称：</td>
							<td class="td2"><form:input path="name" cssClass="required"
									cssStyle="width:280px" /></td>
						</tr>
						<tr>
							<td class="td1">工作日设定：</td>
							<td class="td2"><form:checkbox path="week1" label="星期一" />
								<form:checkbox path="week2" label="星期二" /> <form:checkbox
									path="week3" label="星期三" /> <form:checkbox path="week4"
									label="星期四" /> <form:checkbox path="week5" label="星期五" /><br />
								<form:checkbox path="week6" label="星期六" /> <form:checkbox
									path="week7" label="星期日" /></td>
						</tr>
						<tr>
							<td class="td1">上班时间：</td>
							<td class="td2">上午 <input type="time" name="amBegin"
								id="amBegin"
								value="<fmt:formatDate value="${model.amBegin}" pattern="HH:mm" />"
								class="time"> ~ <input type="time" name="amEnd"
								id="amEnd"
								value="<fmt:formatDate value="${model.amEnd}" pattern="HH:mm" />"
								class="time">
								<p style="padding-top:2px">
									下午 <input type="time" name="pmBegin" id="pmBegin"
										value="<fmt:formatDate value="${model.pmBegin}" pattern="HH:mm" />"
										class="time"> ~ <input type="time" name="pmEnd"
										id="pmEnd"
										value="<fmt:formatDate value="${model.pmEnd}" pattern="HH:mm" />"
										class="time">
								</p>
							</td>
						</tr>
						<tr>
							<td class="td1">有效期：</td>
							<td class="td2"><form:input path="fromDate" type="date"
									cssClass="date" cssStyle="width:100px" />~<form:input
									path="toDate" type="date" cssClass="required date"
									cssStyle="width:100px" />
							</td>
						</tr>

					</tbody>
				</table>

			</form:form>

			<isperp:buttonList>
				<button class="submit nui-mainbtn"
					onclick="isperp.submitForm();return false;">保存</button>
			</isperp:buttonList>
		</div>

		<div id="calendarWorkdate">
			<div id="calendarWorkdateSetting" class="calendar"></div>
		</div>
	</div>
</div>
<div id="workdaySetting" style="font-size:14px" title="设置工作日">
	<div style="padding:10px">
		<label id="workdayDate" style="padding：10px"></label>设置为 <input
			id="cbWorkdayDate" type="checkbox" value="1" /><label
			for="cbWorkdayDate" style="color:blue">工作日</label>
	</div>
</div>
<script type="text/javascript">
	var checkedOldVal = false;
	var $calendarWorkdateSetting;

	$calendarWorkdateSetting = $('#calendarWorkdateSetting').fullCalendar({
		editable : true, contentHeight: 500,
		monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
		titleFormat : {
			month : 'YYYY年 MMMM', // September 2009
			week : " YYYY MMM d[ YYYY]{ '&#8212;'[ MMM] d}", // Sep 7 - 13 2009
			day : 'YYYY, MMM d, dddd' // Tuesday, Sep 8, 2009
		},
		header : {
			left : 'prevYear,prev,today,next,nextYear',
			center : 'title',
			right : ''
		},
		buttonText : {
			prevYear : '上一年',
			nextYear : '下一年',
			today : '今天',
			month : '月',
			week : '周',
			day : '日'
		},
		dayNames : [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ], //换成中文星期  
		dayNamesShort : [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ],
		lazyFetching : false,
		events : 'app/calendar/config/listWorkdate?configId=${model.id}',

		eventClick : function(calEvent, jsEvent, view) {

			setEvent(calEvent);
		}
	/*,
	eventMouseover : function(event, jsEvent, view) {
	}
	 */
	});

	function setEvent(calEvent) {
		$("#workdayDate").text(calEvent.start._i);
		if (calEvent.title == "工作日") {
			checkedOldVal = true;
			$("#cbWorkdayDate").attr("checked", true);
		} else {
			checkedOldVal = false;
			$("#cbWorkdayDate").attr("checked", false);
		}
		$("#workdaySetting").dialog('open');
	}

	$("#workdaySetting").dialog({
		width : 300,
		height : 130,
		modal : true,
		autoOpen : false,
		resizable : false,
		buttons : [ {
			text : "确定",
			click : function() {
				var me = this;

				var checkedVal = $("#cbWorkdayDate:checked").val();
				if (checkedVal != true) {
					checkedVal = false;
				}

				if (checkedVal == checkedOldVal) {
					$(me).dialog("close");
					return;
				}

				var date = $("#workdayDate").text();

				$.post("app/calendar/config/setWokdate", {
					workdate : date,
					isWorkday : checkedVal,
					configId : "${model.id}"

				}, function(data, textStatus) {
					$(me).dialog("close");
					$calendarWorkdateSetting.fullCalendar('refetchEvents');
				});
			}
		}, {
			text : "取消",
			click : function() {
				$(this).dialog("close");
			}
		} ]

	});
</script>

